import React from 'react';
import './OrderDetail.css'
import { Table } from 'antd';
import {AlreadyPay,WaitingFaHuo,WaitingPay,WaitingHeXiao,WaitingShouHuo,OtherOperate} from './CanOperate/CanOperate'
import {withRouter} from 'react-router-dom'
import {inject,observer} from 'mobx-react'
import {toJS} from 'mobx'
import ReactToPrint from 'react-to-print'
import * as api from '../../../../utils/api'
import axios from '../../../../utils/http'
let style={
    width:'120rem'
}
@inject('curOrder')
@observer
class Orderdetail extends React.Component {
    constructor(){
        super()
        this.state={
            curOrder:{},
            columns:[
                {
                  title: '商品名称',
                  dataIndex: 'goodsName',
                  align: 'center',
                  render:(text,record,index)=>{
                      return(
                          <div>
                              {record.goods.goodsName}
                          </div>
                      )
                  }
                },
                {
                  title: '货号',
                  dataIndex: 'goodNumber',
                  align: 'center',
                  render:(text,record,index)=>{
                    return(
                        <div>
                            {record.comspec.number}
                        </div>
                    )
                  }
                },
                {
                    title: '价格',
                    dataIndex: 'goodsPrice',
                    align: 'center',
                    render:(text,record,index)=>{
                        return(
                            <div>
                                {record.goods.goodsPrice}
                            </div>
                        )
                    }
                },
                {
                  title: '数量',
                  dataIndex: 'costinforPq',
                  align: 'center',
                  render:(text,record,index)=>{
                    return(
                        <div>
                            {record.costinfor.costinforPq}
                        </div>
                    )
                  }
                },
                {
                  title: '规格',
                  dataIndex: 'goodRule',
                  align: 'center',
                  render:(text,record,index)=>{
                    return(
                        <div>
                            {record.comspec.comspecName}
                        </div>
                    )
                  }
                },
                {
                  title: '库存',
                  dataIndex: 'goodsCi',
                  align: 'center',
                  render:(text,record,index)=>{
                    return(
                        <div>
                            {record.goods.goodsCi}
                        </div>
                    )
                  }
                },
                {
                  title: '小计',
                  dataIndex: 'goodSmallCount',
                  align: 'center',
                },
            ],
            oprerateColumns:[
                  {
                    title: '操作者',
                    dataIndex: 'opera',
                    align: 'center',
                    render:(txt,record,index)=>{
                        return(
                            <div>
                                {record.opera}
                            </div>
                        )
                    }
                  },
                  {
                    title: '操作时间',
                    dataIndex: 'ordoperTime',
                    align: 'center',
                    render:(text,record,index)=>{
                        return(
                            <div>
                                {new Date(record.ordoperTime).toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,"")}
                            </div>
                        )
                    }
                  },
                  {
                    title: '订单状态',
                    dataIndex: 'ordoperStatu',
                    align: 'center',
                    render:(text,record,index)=>{
                        // console.log(record.ordoper.ordoperStatu)
                        let curOrderState = this.state.curOrderFuKuanState
                        return(
                            <div>
                                {curOrderState}
                            </div>
                        )
                    }
                  },
                  {
                    title: '付款状态',
                    dataIndex: 'payState',
                    align: 'center',
                    render:(text,record,index)=>{
                        let curOrderState = record.payStatu
                        switch(curOrderState){
                            case 1: curOrderState = '未支付';break;
                            case 2: curOrderState = '支付中';break;  
                            case 3: curOrderState = '已付款';break;  
                            default: curOrderState = '已退款';  
                        }
                        return(
                            <div>
                                {curOrderState}
                            </div>
                        )
                    }
                  },
                  {
                    title: '发货状态',
                    dataIndex: 'delivStatu',
                    align: 'center',
                    render:(text,record,index)=>{
                        let curOrderState = record.delivStatu
                        switch(curOrderState){
                            case 1: curOrderState = '已发货';break;
                            case 0: curOrderState = '未发货';break;  
                            default: curOrderState = '发货中';
                        }
                        return(
                            <div>
                                {curOrderState}
                            </div>
                        )
                    }
                  },
                  {
                    title: '备注',
                    dataIndex: 'ordoperDesc',
                    align: 'center',
                    render:(txt,record,index)=>{
                        return(
                            <div>
                                {record.ordoperDesc}
                            </div>
                        )
                    }
                  },
            ],
            // 操作表的Data  进入该页面时会向后台发起请求
            operatePageFlag:false,
            refundPageFlag:false,

            data:[{//当前订单的数据
                memLocations:{},
                ordoper:[{}],
                costinfor:{},
            }],
            goodDataArr:[{goods:{},comspec:{},costinfor:{},key:0}],//将当前订单的商品信息放入数组中  antd表格的数据需要数组
            operateDataArr:[],//当前订单的操作信息表
            curOperateStatus:'',//当前发货状态
            curOrderFuKuanState:'',//当前订单状态
            curPayStatu:'',//当前订单支付状态
            caoZuoBeiZhuMsg:'',//操作备注
        }
    }
    //请求当前页面的信息
    async componentDidMount(){
        // console.log(_this.props.curOrder.curOrderDataId)
        // 获取存取在mobox中的当前订单的ID
        // 向后台查询当前订单信息
        await this.getCurOrderData()
        await this.getCurOrderOperate()
    }
    getCurOrderData = ()=>{
        let _this = this
        console.log(_this.props.curOrder.curOrderDataId)
        axios({
            url:api.GET_QUERYORDERDETAIL,
            method:'GET',
            params:{
                orderId: _this.props.curOrder.curOrderDataId
            }
        }).then(data=>{
            let curOrderData = data.data.data
            console.log(curOrderData)
            let goodDataArr = []
            let curGoodObj = {}
            let curOrderState = curOrderData[0].orderStatu
            switch(curOrderState){
                case 1: curOrderState = '待付款';break;
                case 2: curOrderState = '待发货';break;  
                case 3: curOrderState = '待收货';break;  
                case 4: curOrderState = '待核销';break;  
                case 5: curOrderState = '待评价';break;  
                case 6: curOrderState = '已完成';break;  
                case 7: curOrderState = '已取消';break;  
                case 8: curOrderState = '已退款';break;  
                default: curOrderState = '无效';  
            }
            
            let goodRuleArr = curOrderData.map(item=>{
                return item.comspec
            })
            let goodCostinforArr = curOrderData.map(item=>{
                return item.costinfor
            })
            let goodData = curOrderData.map((item,i)=>{
                return item.goods
            })

            curGoodObj.comspec = goodRuleArr[0]
            curGoodObj.goods = goodData[0]
            curGoodObj.key = 1
            curGoodObj.costinfor = goodCostinforArr[0]
            goodDataArr.push(curGoodObj)

            // console.log(curOrderData)
            // console.log(goodDataArr)

            this.props.curOrder.saveCurOrderDataArr(curOrderData)
            this.setState({
                data:curOrderData,
                goodDataArr,
                curOrderFuKuanState:curOrderState,
                // curOperateStatus:num,
                // operateDataArr,
                // curPayStatu:payStatuNum,
            })
        })
    }
    getCurOrderOperate = ()=>{
        let _this = this
        axios({
            url:api.GET_QUERYORDERDOPER,
            method:'GET',
            params: {
                orderId: _this.props.curOrder.curOrderDataId,
            }
        }).then(data=>{
            console.log(data.data.data)
            let dataArr = data.data.data
            if(dataArr.length>0){
                let num = dataArr[0].delivStatu
                // console.log(curOrderState)
                let payStatuNum = dataArr[0].payStatu
                switch(num){
                    case 1: num = '已发货';break;
                    case 0: num = '未发货';break;
                    default: num = '发货中';
                }
                    
                switch(payStatuNum){
                    case 1: payStatuNum = '未支付';break;
                    case 2: payStatuNum = '支付中';break;  
                    case 3: payStatuNum = '已付款';break;  
                    default: payStatuNum = '已退款';  
                }

                dataArr = dataArr.map((item,i)=>{
                    item.key = i+1
                    return item
                })
                // console.log(dataArr)
                this.props.curOrder.saveCurOrderDataOperateArr(dataArr)
                _this.setState({
                    operateDataArr:dataArr,
                    curOperateStatus:num,
                    curPayStatu:payStatuNum,
                })
            }
            
        })
    }

    changeZongHeState = (obj)=>{
        console.log(obj)
        let curOrderData = {...this.state.curOrder}
        curOrderData.orderState = obj
        this.setState({
            curOrder:curOrderData
        })

        /*向后台发起请求 修改订单综合状态*/
        // 刷新订单详情页面

    }
    // 打开操作备注页面
    openBeiZhuPage = ()=>{
        this.setState({
            operatePageFlag:true,
            refundPageFlag:false,
        })
        this.props.history.push('/Home/dingDan/Orderlist/Orderdetail/Operate')
    }
    // 打开退款管理页面
    openRefundPage = ()=>{
        this.setState({
            operatePageFlag:false,
            refundPageFlag:true,
        })
        this.props.history.push('/Home/dingDan/Orderlist/Orderdetail/Refundman')
    }
    penFaHuoDanDetailPage=()=>{
        /*
            向后台发起请求 查询当前订单ID对应的发货单详情 
            保存在本地和mobx中
        */
       let val = true
       this.props.curOrder.chnageFromOrderToFaHuoDan(val)
        this.props.history.push('/Home/dingDan/Deliverylist/Deliverydetail')
    }
    huiDaoOrder = ()=>{
        // 回到订单列表
        this.props.history.push('/Home/dingDan/Orderlist')
    }
    // 修改操作备注
    changeBeiZhu = (e)=>{
        this.setState({
            caoZuoBeiZhuMsg:e.target.value
        })
    }   
    render(){
        return (
            <div>
                {/* {this.state.operatePageFlag===false && this.state.refundPageFlag===false */}
                {/* ?  */}
                <div className='orderDetailBoxClass'>
                    <div ref={el=>(this.componentRef=el)}>
                        <h1>订单详情</h1>
                            <button type="button" className="copyBtn" onClick={this.huiDaoOrder}>返回订单列表</button>
                            <div className="orderClass">
                        <h3>基本信息</h3>
                    <div>
                        <ul>
                            <li>订单编号 : {this.state.data[0].orderCode}</li>
                            <li>订单状态 : {this.state.curPayStatu==='已付款'? <span>{this.state.curPayStatu}</span> : <span>{this.state.curOrderFuKuanState}</span>}&nbsp;&nbsp;{this.state.curOperateStatus}</li>
                            <li>购买用户 : {this.state.data[0].orderBu}</li>
                            <li>下单时间 : {new Date(this.state.data[0].orderOt).toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,"")}</li>
                            <li>支付方式 : {this.state.data[0].orderPm}</li>
                            <li>付款时间 : {new Date(this.state.data[0].orderPt).toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,"")}</li>
                            <li>配送方式 : {this.state.data[0].orderDm}</li>
                            <li>发货时间 : {this.state.curOperateStatus!=='未发货'? <span>{new Date(this.state.data[0].orderDt).toLocaleString().replace(/\//g,'-').replace(/[\u4e00-\u9fa5]/g,"")}</span>:<span>未发货</span>}</li>
                            <li>发货单号 : {this.state.curOperateStatus!=='未发货'? <span>{this.state.data[0].orderIn}</span>:<span>未发货</span>}</li>
                            {}
                        </ul>
                    </div>
                    <h3>客户留言</h3>
                    <div>{this.state.data[0].orderCm}</div>
                    <h3>收货人信息</h3>
                    <div>
                        <ul>
                            <li>姓名 : {this.state.data[0].memLocations.memName}</li>
                            <li>手机 : {this.state.data[0].memLocations.memNum}</li>
                            <li>地址 : {this.state.data[0].memLocations.memLocation} </li>
                        </ul>
                    </div>
                    <h3>商品信息</h3>
                    <div>
                        {/* <Table columns={this.state.columns} dataSource={this.state.goodData} pagination={false}/> */}
                        <Table columns={this.state.columns} dataSource={this.state.goodDataArr} pagination={false}/>                        
                        <div>
                            <span className='marginRightClass'>商品总重量 : {this.state.goodDataArr[0].goods.goodsCw} 千克</span>
                            <span>合计 : {parseFloat(this.state.data[0].costinfor.costinforTaog).toFixed(2)}</span>
                        </div>
                    </div>
                    <h3>费用信息</h3>
                    <div>商品总金额￥{parseFloat(this.state.data[0].costinfor.costinforTaog).toFixed(2)} + 配送费用￥{parseFloat(this.state.data[0].costinfor.costinforDc).toFixed(2)} - 已付款金额￥{parseFloat(this.state.data[0].costinfor.costinforAp).toFixed(2)} - 使用优惠券￥{parseFloat(this.state.data[0].costinfor.costinforUca).toFixed(2)} = 应付款金额￥{parseFloat(this.state.data[0].costinfor.costinforAd).toFixed(2)}</div>
                    
                    </div>
                <div className="txtCenter">
                        <ReactToPrint
                            trigger={()=> <button type="button" className="copyBtn">打印订单</button>}
                            content={()=> this.componentRef}
                            pageStyle={style}
                        />
                    </div>
                    <h3>操作信息</h3>
                    <div className="peratePage">
                        操作备注：<textarea name="" id="" cols="80" rows="3" onChange={this.changeBeiZhu}></textarea>
                    </div>
                    <div className="operateBox">
                        {/* 不同的订单状态会显示不同的可执行操作组件 */}
                        {this.state.curPayStatu === '已付款' ? <AlreadyPay operateMsg={this.state.caoZuoBeiZhuMsg} onToBeiZhu={this.openBeiZhuPage} onToRefund={this.openRefundPage} onOpenFaHuoDanDetailPage={this.penFaHuoDanDetailPage}/>:
                            this.state.curOrderFuKuanState === '待付款' ? <WaitingPay operateMsg={this.state.caoZuoBeiZhuMsg} onChangeCurOrderStateZongHe={this.changeZongHeState} onToBeiZhu={this.openBeiZhuPage} onToRefund={this.openRefundPage}/>:
                            this.state.curOrderFuKuanState === '待发货' ? <WaitingFaHuo operateMsg={this.state.caoZuoBeiZhuMsg} onOpenFaHuoDanDetailPage={this.penFaHuoDanDetailPage} onChangeCurOrderStateZongHe={this.changeZongHeState} onToBeiZhu={this.openBeiZhuPage} onToRefund={this.openRefundPage}/>:
                            this.state.curOrderFuKuanState === '待收货' ? <WaitingShouHuo operateMsg={this.state.caoZuoBeiZhuMsg} onChangeCurOrderStateZongHe={this.changeZongHeState} onToBeiZhu={this.openBeiZhuPage} onToRefund={this.openRefundPage}/>:
                            this.state.curOrderFuKuanState === '待核销' ? <WaitingHeXiao operateMsg={this.state.caoZuoBeiZhuMsg} onToBeiZhu={this.openBeiZhuPage} onToRefund={this.openRefundPage}/>:
                            this.state.curOrderFuKuanState === '待评价' ? <OtherOperate operateMsg={this.state.caoZuoBeiZhuMsg} onToBeiZhu={this.openBeiZhuPage}/>:
                            this.state.curOrderFuKuanState === '已完成' ? <OtherOperate operateMsg={this.state.caoZuoBeiZhuMsg} onToBeiZhu={this.openBeiZhuPage}/>:
                            this.state.curOrderFuKuanState === '已取消' ? <OtherOperate operateMsg={this.state.caoZuoBeiZhuMsg} onToBeiZhu={this.openBeiZhuPage}/>:
                            this.state.curOrderFuKuanState === '已退款' ? <OtherOperate operateMsg={this.state.caoZuoBeiZhuMsg} onToBeiZhu={this.openBeiZhuPage}/>:
                            this.state.curOrderFuKuanState === '无效' ? <OtherOperate operateMsg={this.state.caoZuoBeiZhuMsg} onToBeiZhu={this.openBeiZhuPage}/>:''
                        }
                    </div>
                    <div>
                        <Table columns={this.state.oprerateColumns} dataSource={this.state.operateDataArr} pagination={false}/>
                    </div>
                </div>

                <div className='scrollbar'></div>
            </div>
            {/* :
                this.state.operatePageFlag===true && this.state.refundPageFlag===false
                ?
                <div>
                    <OperatePage onToOrderDetail={this.huiDaoOrderDetail}></OperatePage>
                </div>
                :
                <div>
                    <RefundPage onToOrderDetail={this.huiDaoOrderDetail}></RefundPage>
                </div>
            }*/}
            </div> 
            );
    }
}
export default withRouter(Orderdetail);